﻿<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ include file="/decorators/taglibs.jsp"%>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>6dgame</title>
<link rel="shortcut icon" href="${ctx}/resources/images/logo_200.jpg" />
<!-- Site CSS -->
<link rel="stylesheet" href="${ctx }/resources/assets/css/bootstrap.css">
<link rel="stylesheet" href="${ctx }/resources/assets/css/site.css">
<link rel="stylesheet" href="${ctx }/resources/assets/css/social-buttons.css">
<link rel="stylesheet" href="${ctx }/resources/assets/css/font-awesome.min.css">
<link rel="stylesheet" href="${ctx }/resources/css/bootstrap-responsive.css" >
<!-- JQuery CSS-->
<link rel="stylesheet" href="${ctx }/resources/js/jquery/themes/start/jquery.ui.all.css">
<!-- Messenger -->
<link rel="stylesheet" href="${ctx}/resources/messenger/css/messenger.css">
<link rel="stylesheet" href="${ctx}/resources/messenger/css/messenger-theme-future.css">
<!-- Extras CSS -->
<!-- HTML5 shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!--[if lt IE 9]>
    <script src="/assets/js/html5shiv.js"></script>
    <script src="/assets/js/respond.min.js"></script>
    <![endif]-->
<!-- Favicons -->
<style type="text/css">
	#scrollUp {
		bottom: 20px;
		right: 20px;
		height: 38px;
		width: 38px;
		background: url("http://www.bootcss.com/assets/img/top.png") no-repeat;
	}
	#console{
		height:280px;
	}
</style>
<body>
    <!-- 注册 -->
	<div id="signup" class="modal hide fade">
		<form onSubmit="return false;">
		    <div class="modal-header">
	              <a class="close" data-dismiss="modal">×</a>
	              <h3>注册</h3>
	        </div>
			<div class="modal-body">
				<div class="form-group">
				<label for="account">账号</label>
				<input type="text" class="form-control" id="username_signup" placeholder="请输入账号">
				</div>
				<div class="form-group">
				<label for="email">邮箱</label>
				<input type="email" class="form-control" id="email_signup" placeholder="请输入邮箱">
				</div>
				<div class="form-group">
				<label for="signup-password">密码</label>
				<input type="password" class="form-control" id="password_signup" placeholder="请输入密码">
				</div>
			</div>
	        <div class="modal-footer">
				<input type="button" class="btn btn-success" value="注册" id="signup_btn"/>
	        </div>
		</form>	        
    </div>
 	<!-- 注册结束 -->
 	<!-- 导航 -->
	<div class="navbar navbar-inverse navbar-fixed-top">
		<div class="container">
			<div class="navbar-header">
				<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
					<span class="icon-bar"></span> 
					<span class="icon-bar"></span> 
					<span class="icon-bar"></span>
				</button>
			</div>
			<div class="navbar-collapse collapse">
				<ul class="nav navbar-nav">
					<li class="active"><a href="#">主页</a></li>
					<li><a href="#applications">应用</a></li>
					<li><a href="#photograph">摄影</a></li>
					<li><a href="#" id="chat-room">聊天室</a></li>
					<li><a href="#about">关于</a></li>
					<li class="dropdown">
						<a href="#" class="dropdown-toggle" data-toggle="dropdown">联系<b class="caret"></b></a>
						<ul class="dropdown-menu">
							<li><a href="http://weibo.com/318280005" target="_blank" class="text-success">新浪微博</a></li>
							<li><a href="http://t.qq.com/superstar_chen" target="_blank" class="text-success">腾讯微博</a></li>
							<li><a href="#">微信</a></li>
							<li class="divider"></li>
							<li><a href="https://www.facebook.com/haixiang.chen" target="_blank">Facebook</a></li>
							<li><a href="https://plus.google.com/u/0/107273031820370586099/" target="_blank">Google+</a></li>
						</ul>
					</li>
				</ul>
				<c:choose>
				    <c:when test="${user ==  null }">
				   		<ul class="nav navbar-nav pull-right">
							<li class="divider-vertical"></li>
							<li class="dropdown">
								<a data-toggle="dropdown" class="dropdown-toggle" href="#">登录<strong class="caret"></strong></a>
								<ul class="dropdown-menu col-md-3">
									<li><a href="${ctx }/oauth/sina">新浪微博</a></li>
									<li><a href="#">腾讯QQ</a></li>
									<li class="divider"></li>
									<li>
										<form class="navbar-form" onSubmit="return false;">
									        <label for="username">用户名：<br>
					                          <input id="username" type="text" class="form-control col-md-2">
					                        </label>
					                        <label for="signin-password">密码：<br>
					                          <input id="password" type="password" class="form-control col-md-2">
					                        </label>
									        <button id="login" class="btn btn-success">登录</button>
									    </form >
									</li>
								</ul>
							</li>
							<li><a href="#signup" data-target="#signup" data-toggle="modal">注册</a></li>
						</ul>
				    </c:when>
				    <c:otherwise>
				   		<ul class="nav navbar-nav pull-right">
							<li class="active"><a href="${ctx }/me/${user.uid}"><i class="icon-user"></i>${user.username}</a></li>
							<li><a href="${ctx }logout">退出</a></li>
						</ul>
				    </c:otherwise>
				</c:choose>
			</div>
		</div>
	</div>
	<!-- Carousel ================================================== -->
	<div id="myCarousel" class="carousel slide">
		<!-- Indicators -->
		<ol class="carousel-indicators">
			<li data-target="#myCarousel" data-slide-to="0" class="active"></li>
			<li data-target="#myCarousel" data-slide-to="1"></li>
			<li data-target="#myCarousel" data-slide-to="2"></li>
		</ol>
		<div class="carousel-inner">
			<div class="item active">
				<img src="${ctx }/resources/images/img/S_01.jpg" alt="" style="height: 300px">
				<div class="container">
					<div class="carousel-caption">
						<h1>探索</h1>
						<p class="lead">路漫漫其修远兮,吾将上下而求索</p>
						<a class="btn btn-large btn-primary" href="#">开始</a>
					</div>
				</div>
			</div>
			<div class="item">
				<img src="${ctx }/resources/images/img/S_02.jpg" alt="" style="height: 300px">
				<div class="container">
					<div class="carousel-caption">
						<h1>发现</h1>
						<p class="lead">一滴水,用显微镜看,也是一个大世界.</p>
						<a class="btn btn-large btn-primary" href="#">开始</a>
					</div>
				</div>
			</div>
			<div class="item">
				<img src="${ctx }/resources/images/img/S_03.jpg" alt="" style="height: 300px">
				<div class="container">
					<div class="carousel-caption">
						<h1>猎奇</h1>
						<p class="lead">大千世界,无奇不有</p>
						<a class="btn btn-large btn-primary" href="#">开始</a>
					</div>
				</div>
			</div>
		</div>
		<a class="left carousel-control" href="#myCarousel" data-slide="prev">
			<span class="glyphicon glyphicon-chevron-left"></span>
		</a> 
		<a class="right carousel-control" href="#myCarousel" data-slide="next">
			<span class="glyphicon glyphicon-chevron-right"></span>
		</a>
	</div>
	<!-- /.carousel -->

	<div class="container projects">
		<!-- 应用 -->
		<div class="row text-center" id="applications">
				<div class="col-md-4">
					<div class="thumbnail">
						<img class="" src="${ctx }/resources/images/img/applications_1.png">
						<div class="caption">
							<h3>
								<a href="${ctx }/purchase/" title="采购助手" target="_self" onclick="">采购助手<br></a>
								<a href="${ctx }/resources/download/apk/Purchase.apk" title="采购助手" target="_blank">
								<small>- 下载 -</small></a>
							</h3>
							<p>
								一款使用方便的采购工具，帮您快速提高工作效率!
							</p>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="thumbnail">
						<img class="" src="${ctx }/resources/images/img/applications_1.png">
						<div class="caption">
							<h3>
								<a href="javascript:void(0)" title="起床闹铃" target="_blank" onclick="">起床闹铃<br>
								<small>- 下载 -</small></a>
							</h3>
							<p>
								一款正在酝酿需求的产品!
							</p>
						</div>
					</div>
				</div>
				<div class="col-md-4">
					<div class="thumbnail">
						<img class="" src="${ctx }/resources/images/img/applications_1.png">
						<div class="caption">
							<h3>
								<a href="javascript:void(0)" title="Secret" target="_blank" onclick="">Secret<br>
								<small>- 下载 -</small></a>
							</h3>
							<p>
								一款尚未出生的神秘产品!
							</p>
						</div>
					</div>
				</div>
		</div><br>
		<!-- 摄影 -->
		<div class="row text-center" id="photograph">
			<div class="col-md-4">
				<div class="panel panel-default">
					<div class="panel-heading"><h1>摄影</h1></div>
					<div class="panel-body">
					   <p>趁我还年轻，<br>还不知道天高地厚。<br>腿能走，<br>口能说，<br>还愿意和这个善良的世界谈谈。</p>
					</div>
					<div class="panel-footer">
						<a class="btn btn-primary" href="javascript:void(0)">浏览我的摄影</a>
					</div>
				</div>
			</div>
			<div class="col-md-8">
				 <div id="photograph" class="carousel slide">
                        <ol class="carousel-indicators">
                            <li data-target="#photograph" data-slide-to="0" class="active"> </li>
                            <li data-target="#photograph" data-slide-to="1" class=""></li>
                            <li data-target="#photograph" data-slide-to="2" class=""></li>
                            <li data-target="#photograph" data-slide-to="3" class=""></li>
                            <li data-target="#photograph" data-slide-to="4" class=""></li>
                            <li data-target="#photograph" data-slide-to="5" class=""></li>
                            <li data-target="#photograph" data-slide-to="6" class=""></li>
                            <li data-target="#photograph" data-slide-to="7" class=""></li>
                            <li data-target="#photograph" data-slide-to="8" class=""></li>
                            <li data-target="#photograph" data-slide-to="9" class=""></li>
                        </ol>
                        <div class="carousel-inner">
                            <div class="item active"><a href="javascript:void(0)" target="_blank"><img src="${ctx }/resources/images/img/travel_01.jpg"></a></div>
                            <div class="item"><a href="javascript:void(0)" target="_blank"><img src="${ctx }/resources/images/img/travel_02.jpg"></a></div>
                            <div class="item"><a href="javascript:void(0)" target="_blank"><img src="${ctx }/resources/images/img/travel_03.jpg"></a></div>
                            <div class="item"><a href="javascript:void(0)" target="_blank"><img src="${ctx }/resources/images/img/travel_04.jpg"></a></div>
                            <div class="item"><a href="javascript:void(0)" target="_blank"><img src="${ctx }/resources/images/img/travel_05.jpg"></a></div>
                            <div class="item"><a href="javascript:void(0)" target="_blank"><img src="${ctx }/resources/images/img/travel_06.jpg"></a></div>
                            <div class="item"><a href="javascript:void(0)" target="_blank"><img src="${ctx }/resources/images/img/travel_07.jpg"></a></div>
                            <div class="item"><a href="javascript:void(0)" target="_blank"><img src="${ctx }/resources/images/img/travel_08.jpg"></a></div>
                            <div class="item"><a href="javascript:void(0)" target="_blank"><img src="${ctx }/resources/images/img/travel_09.jpg"></a></div>
                            <div class="item"><a href="javascript:void(0)" target="_blank"><img src="${ctx }/resources/images/img/travel_10.jpg"></a></div>
                        </div>
                       	<a class="carousel-control left" href="#photograph" data-slide="prev"><span class="glyphicon glyphicon-chevron-left"></span></a>
                        <a class="carousel-control right" href="#photograph" data-slide="next"><span class="glyphicon glyphicon-chevron-right"></span></a>
                 </div>
			</div>
		</div><br>
		<!--  关于 About  -->
	    <div id="about" class="row text-center">
	    	<div class="col-md-12 panel">
	        	<div class="row">
	                <div class="col-md-12">
	                	<div class="col-md-5">
	                		<h1>工作</h1>
	                		<span>
		                		 热爱编程，喜欢钻研新技术，愿意尝试新东西。
	                		</span>
	                	</div>
	                	<div class="col-md-2">
		                	<img class="img-circle" src="${ctx }/resources/images/img/me_2010.jpg">
	                	</div>
	                	<div class="col-md-5">
	                		<h1>生活</h1>
	                		<span>
		                		 爱好长跑，没事还走出去看看这个世界。
	                		</span>
	                	</div>
	            	</div>
				</div>
	        </div>
	    </div>
	</div>
	<!-- /.container -->
	<footer class="footer">
	    <div class="container">
	        <div class="row">
	            <div class="col-md-2 col-md-offset-2">
	              <h5>友情链接</h5>
	             	<a href="http://www.ibm.com/developerworks/cn/java/" target="_blank">developerWorks®</a><br>
	            </div>
	            <div class="col-md-2">
	              <h5>博客</h5>
	                <a href="http://newday.iteye.com/">ITeye</a><br>
	             	<a href="http://blog.csdn.net/lchina1314" target="_blank">CSDN</a><br>
	                <a href="http://hi.baidu.com/luckystreet" target="_blank">百度</a><br>
	                <a href="http://user.qzone.qq.com/506110230/">空间</a>
	            </div>
	            <div class="col-md-2">
	                <h5>联系</h5>
	                <a href="http://weibo.com/318280005" target="_blank">新浪微博</a><br>
	                <a href="http://t.qq.com/superstar_chen" target="_blank">腾讯微博</a><br>
	                <a href="https://plus.google.com/107273031820370586099" target="_blank">Google+</a><br>
	                <a href="https://www.facebook.com/haixiang.chen" target="_blank">Facebook</a>
	            </div>
	            <div class="col-md-2 lovingly">
	                <h4 class="wx-stamp">微信关注<span>&hearts;</span></h4>
	                <div style="margin-top:10px"><img src="${ctx }resources/images/img/webwxgetmsgimg.jpg" alt="WeChat" width="90px" height="90px"/></div>
	            </div>
	        </div>
	    </div>
	</footer>
	 <!-- ui-dialog -->
      <div id="dialog_chat" title="在线聊天室">
      	<div class="row">
      		<div class="col-md-12">
		        <div id="console" class="form-control"></div>
      		</div><br>
      		<div class="col-md-12 ">
	        	<input type="text" placeholder="请输入内容并按回车发送" id="chat" class="form-control">
      		</div>
      	</div>
      </div>
    <a id="scrollUp" href="#top" title="" style="position: fixed; z-index: 2147483647; display: block;"></a>
	<!-- jquery -->
	<script type="text/javascript"  src="${ctx }/resources/js/jquery/jquery-1.9.1.js"></script>	
	<script type="text/javascript"  src="${ctx }/resources/js/jquery/ui/jquery.ui.core.js"></script>
	<script type="text/javascript"  src="${ctx }/resources/js/jquery/ui/jquery.ui.widget.js"></script>
	<script type="text/javascript"  src="${ctx }/resources/js/jquery/ui/jquery.ui.mouse.js"></script>
	<script type="text/javascript"  src="${ctx }/resources/js/jquery/ui/jquery.ui.draggable.js"></script>
	<script type="text/javascript"  src="${ctx }/resources/js/jquery/ui/jquery.ui.position.js"></script>
	<script type="text/javascript"  src="${ctx }/resources/js/jquery/ui/jquery.ui.resizable.js"></script>
	<script type="text/javascript"  src="${ctx }/resources/js/jquery/ui/jquery.ui.button.js"></script>
	<script type="text/javascript"  src="${ctx }/resources/js/jquery/ui/jquery.ui.dialog.js"></script>
	<script type="text/javascript"  src="${ctx }/resources/js/jquery/ui/jquery.ui.effect.js"></script>
	<script type="text/javascript"  src="${ctx }/resources/js/jquery/ui/jquery.ui.effect-blind.js"></script>
	<script type="text/javascript"  src="${ctx }/resources/js/jquery/ui/jquery.ui.effect-explode.js"></script>
	<!-- Messenger -->
	<script type="text/javascript" src="${ctx}/resources/messenger/js/messenger.js"></script>
	
	<!-- <script src="${ctx }resources/assets/js/bootstrap.js"></script> -->
	<script src="${ctx }/resources/assets/js/holder.js"></script>
	<!-- bootstrap -->	
	<script src="${ctx }/resources/js/bootstrap/bootstrap-transition.js"></script>
	<script src="${ctx }/resources/js/bootstrap/bootstrap-alert.js"></script>
	<script src="${ctx }/resources/js/bootstrap/bootstrap-modal.js"></script>
	<script src="${ctx }/resources/js/bootstrap/bootstrap-dropdown.js"></script>
	<script src="${ctx }/resources/js/bootstrap/bootstrap-scrollspy.js"></script>
	<script src="${ctx }/resources/js/bootstrap/bootstrap-tab.js"></script>
	<script src="${ctx }/resources/js/bootstrap/bootstrap-tooltip.js"></script>
	<script src="${ctx }/resources/js/bootstrap/bootstrap-popover.js"></script>
	<script src="${ctx }/resources/js/bootstrap/bootstrap-button.js"></script>
	<script src="${ctx }/resources/js/bootstrap/bootstrap-collapse.js"></script>
	<script src="${ctx }/resources/js/bootstrap/bootstrap-carousel.js"></script>
	<script src="${ctx }/resources/js/bootstrap/bootstrap-typeahead.js"></script>
	<script>
		var Chat = {};
	    Chat.socket = null;
	    Chat.connect = (function(host) {
	        if ('WebSocket' in window) {
	            Chat.socket = new WebSocket(host);
	        } else if ('MozWebSocket' in window) {
	            Chat.socket = new MozWebSocket(host);
	        } else {
	            Console.log('对不起,您的浏览器不支持在线聊天!');
	            return;
	        }
	        Chat.socket.onopen = function () {
	            document.getElementById('chat').onkeydown = function(event) {
	                if (event.keyCode == 13) {
	                    Chat.sendMessage();
	                }
	            };
	        };
	        Chat.socket.onclose = function () {
	            document.getElementById('chat').onkeydown = null;
	            Console.log('连接已断开');
	        };
	        Chat.socket.onmessage = function (message) {
	            Console.log(message.data);
	        };
	    });
		/* Chat 初始化 */
	    Chat.initialize = function() {
	        if (window.location.protocol == 'http:') {
	            Chat.connect('ws://' + window.location.host + '/servlet/chat/ChatServlet');
	        } else {
	            Chat.connect('wss://' + window.location.host + '/servlet/chat/ChatServlet');
	        }
	    };
		/* Chat发送消息 */
	    Chat.sendMessage = (function() {
	        var message = document.getElementById('chat').value;
	        if (message != '') {
	            Chat.socket.send(message);
	            document.getElementById('chat').value = '';
	        }
	    });
		/* 定义输出对话内容函数 */
	    var Console = {};
	    Console.log = (function(message) {
	        var console = document.getElementById('console');
	        var p = document.createElement('p');
	        p.style.wordWrap = 'break-word';
	        p.innerHTML = message;
	        console.appendChild(p);
	        while (console.childNodes.length > 9) {
	            console.removeChild(console.firstChild);
	        }
	        console.scrollTop = console.scrollHeight;
	    });
		/* 进入聊天室 */
		$('#chat-room').click(function () {
		    $('#dialog_chat').dialog('open');
		    Chat.initialize();
		    return false;
		});
		/* 聊天室页面初始化 */
		$('#dialog_chat').dialog({
		    autoOpen: false,
		    width: 325,
		    height:410,
		    close:function(){
		    	Chat.socket.close();
		    }
		});
		$("#login").click(function(){
			var username = $("#username").val();
			var password = $("#password").val();
			if(username == null || username == "" || password == null || password == ""){
				$.globalMessenger().post({
		       		  message: '用户名或密码不能为空!',
		       		  type: 'error',
		       		  hideAfter: 2,
		       		  showCloseButton: false
	     		});
				return false;	
			}else{
				$.ajax({
					type : "POST", 
					async: false, 
					url : "${ctx }/login", 
					data : {
						username:	username,
						password:	password
					},
					success : function(data)
					{
						eval("var data="+data);
						if(data.code == 1001){
							window.location.reload();
						}else{
							$.globalMessenger().post({
					       		  message: data.message,
					       		  type: 'error',
					       		  hideAfter: 2,
					       		  showCloseButton: false
				     		});
						}
						
					}
				});
			}
		});
		$("#signup_btn").click(function(){
			var username = $("#username_signup").val();
			var email = $("#email_signup").val();
			var password = $("#password_signup").val();
			if(username == null || username == "" || password == null || password == "" || email == null || email==""){
				$.globalMessenger().post({
		       		  message: '输入不能存在空项!',
		       		  type: 'error',
		       		  hideAfter: 2,
		       		  showCloseButton: false
	     		});
				return false;	
			}else{
				$.ajax({
					type : "POST", 
					async: false, 
					url : "${ctx }/user/saveuser.do", 
					data : {
						username:	username,
						email	:	email,
						password:	password
					},
					success : function(data)
					{
						eval("var data="+data);
						if(data.code == 1001){
							$("#username_signup").val("");
							$("#email_signup").val("");
							$("#password_signup").val("");
							$(".close").trigger( "click" );
						}
						$.globalMessenger().post({
				       		  message: data.message,
				       		  type: 'error',
				       		  hideAfter: 2,
				       		  showCloseButton: false
			     		});
					}
				});
			}
		});
	</script>
</body>
</html>